<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<!-- Include a customized stylesheet: -->
<!--	<link href='custom-skin/ui.dynatree.css' rel='stylesheet' type='text/css' > -->
	<link href='skin-vista/ui.dynatree.css' rel='stylesheet' type='text/css' >
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
    
<script type='text/javascript'>
	$(function(){
		$("#tree").dynatree({
			title: "Sample Theming",
			rootVisible: true,
			imagePath: "skin-vista/", // Use a custom image folder
			onSelect: function(dtnode) {
				alert ("You selected " + dtnode);
			}
		});
	});
</script>
</head>

<body class="example">
	<h1>Example: Theming</h1>
	<p class="description">
		Includes a custom CSS and sets options.imagePath to a custom theming 
		folder (inspired by Windows Vista).
	</p>
	
	<div id="tree">
		<ul>
			<li>Node 1
			<li data="icon: 'customdoc1.gif'">Node 2 (with custom icon)
			<li class="folder">Folder 3
				<ul>
					<li>Node 3.1
					<li>Node 3.2
				</ul>
 			<li data="isFolder: true, icon: 'folder_docs.gif'">Folder 4 (with custom icon)
				<ul>
					<li>Node 4.1
					<li>Node 4.2
				</ul>

			<li>Document with some children
				<ul>
					<li>Sub-item 4.1
					<li>Sub-item 4.2
				</ul>

			<li data="addClass:'custom1'">Document with custom class
		</ul>
	</div>

	<hr>
	<p class="sample-links">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		&nbsp; <a class="hideOutsideFS" href="#">Link to this page</a>
		&nbsp; <a class="hideInsideFS" href="samples.html">Example Browser</a>
	 </p>
</body>
</html>
